<template>
  <div class="gl_contentBox gl_heightFull">
    <el-tabs v-model="activeName">
      <template v-for="item in optList">
        <el-tab-pane :key="item.code" :name="item.code" :label="item.name" @tab-click="handleTabClick">
          <components :is="item.component" v-if="activeName === item.code" :branch-id="branchId" :league-type="activeName === 'League' ? leagueType : null" />
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>
<script>
import gameList from './independentGame.vue';
import leagueList from './leagueGame.vue';
export default {
  components: {
    gameList,
    leagueList
  },
  data() {
    return {
      activeName: '',
      optList: [
        {
          code: 'Independent',
          name: '独立赛',
          component: gameList
        },
        {
          code: 'League',
          name: '联赛',
          component: leagueList
        }
      ],
      leagueType: '',
      branchId: ''
    };
  },
  created() {
    this.branchId = this.$route.query.branchid;
    console.log(this.branchId, '分道馆branchId');
    this.activeName = this.$route.query.gameType ? this.$route.query.gameType === 'Independent' ? 'Independent' : 'League' : 'Independent';
    // 正确返回   从联赛返回-从分站赛返回
    if (this.activeName === 'League' && this.$route.query.gameType && this.$route.query.gameType.indexOf('Substation') !== -1) {
      this.leagueType = this.$route.query.gameType.slice(0, 5) + 'League';
    }
  },
  methods: {
    handleTabClick(tabItem) {
      this.activeName = tabItem.paneName;
    }
  }
};
</script>
